import React, { Component, createRef } from 'react';
import { PageHeader, Button, Space, Table, Tag, Pagination } from 'antd';
import styled from 'styled-components';

import url from '@/config/url';
import axios from '@/http/http';
// 引入模态框组件
import ModalCom from '../../../components/ModalCom';
class Index extends Component {
    constructor() {
        super()
        //定义的列 (给当前类添加类成员数据)
        this.columns = [
            {
                title: '序号',  // 设置当前列的表头
                dataIndex: 'id', // 当前列使用的是数据中的哪一个地址(字段)
                align: 'center',
                // key: 'name',
                // render: (text) => <a>{text}</a>,
            },
            {
                title: '用户名',
                dataIndex: 'username',
                align: 'center',
                // key: 'age',
            },
            {
                title: '手机号',
                dataIndex: 'mobile',
                align: 'center',
                // key: 'address',
            },
            {
                title: '邮箱',
                dataIndex: 'email',
                align: 'center',
                // key: 'address',
            },
            {
                title: '性别',
                // key: 'tags',
                dataIndex: 'gender',
                render: (text, record, index) => {
                    // text当前行的值，当前行数据record，行索引index
                    // return record.gender == 1 ? <Tag color={'red'}>男</Tag> : <Tag color={'green'}>女</Tag>
                    if (record.gender == 1) {
                        return <Tag color={'red'}>男</Tag>
                    }
                    if (record.gender == 2) {
                        return <Tag color={'red'}>女</Tag>
                    }
                    if (record.gender == 3) {
                        return <Tag color={'yellow'}>保密</Tag>
                    }
                }
            },
            {
                title: '状态',
                // key: 'tags',
                dataIndex: 'status',
                render: (text, record, index) => {
                    // console.log(record);
                    return record.gender == 1 ? <Tag color={'red'}>正常</Tag> : <Tag color={'green'}>禁用</Tag>
                }
            },
            {
                title: '操作',
                key: 'action',
                render: (_, record) => (
                    <Space size="middle">
                        <Button type='primary'>编辑</Button>
                        <Button type='danger'>删除</Button>
                    </Space>
                ),
            },
        ];
    }
    // 创建引用对象
    ref1 = createRef()
    state = {
        page: 1,  // 默认第一页
        data: [], // 表格数据列表数组
        total: 0,  // 数据总条数
        modalTitle: "",
    }
    render() {
        return (
            <div>
                {/* 页头 */}
                <Title>
                    <PageHeader
                        className="site-page-header"
                        title="用户列表"
                        extra={[
                            <Button type='primary' key={1} onClick={this.addUserFn}>添加</Button>,
                        ]}
                    />
                </Title>
                {/* 表格部分 */}
                <Table columns={this.columns} pagination={false} dataSource={this.state.data} rowKey={(record) => record.id
                } />
                {/* 分页器组件 */}
                <Pagination defaultCurrent={this.state.page} total={this.state.total} onChange={this.onChange} />;
                {/* 模态框组件 */}
                <ModalCom ref={this.ref1} modalTitle={this.state.modalTitle} loadData={this.loadData}></ModalCom>
            </div>
        );
    };
    componentDidMount() {
        this.loadData()
    };
    loadData = () => {
        // 请求用户列表数据
        axios.get(url.getuserlist, {
            params: {
                page: this.state.page
            }
        }).then(res => {
            console.log(res);
            this.setState({
                page: res.data.paginate.current_page,  //当前页
                data: res.data.paginate.data,  //总数据
                total: res.data.paginate.total  // 总数据条数
            })
        }).catch(e => { })
    }
    onChange = (page, pageSize) => {
        // console.log(page)
        this.setState({ page: page }, () => {
            this.loadData()
        })
    };
    // 点击添加按钮
    addUserFn = () => {
        // 01: 让模态框显示    
        // console.log(this.ref1);
        this.ref1.current.showModal()
        // 修改标题
        this.setState({
            modalTitle: '添加'
        })
    }
}

const Title = styled.div`
  border: 1px solid rgb(235, 237, 240);
`
export default Index;
